<template>
	<view>
		<!-- 分类精选模板 -->
		<view class="f-header m-t" v-if="choicenessList!=''">
			<image src="http://minipos.posyun3721.com/image/shopImg/h1.png"></image>
			<view class="tit-box">
				<text class="tit">{{title}}</text>
				<text class="tit2">Competitive Products For You</text>
			</view>
		</view>
		<view class="hot-floor" v-for="(item,index) in slist" :key="index">
			<view class="floor-img-box">
				<image class="floor-img" :src="choicenessList[index].FImgUrl||`../../static/bj${index+1}.jpg`"
					mode="aspectFit"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(items,indexs) in item" :key="indexs" class="floor-item"
						@click="navToDetailPage(items,2)">
						<image class="floor-image" :src="items.img||`../../static/errorImage.jpg`" mode="aspectFit">
						</image>
						<text class="title clamp">{{items.title}}</text>
						<text class="price">￥{{items.price}}</text>
					</view>
					<view class="more" @tap="getFocusSearch(index)">
						<text class="more-text1">查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 另外的模板 -->
		<!-- <product></product> -->
	</view>
</template>

<script>
	import Product from '@/components/product/product1.vue';
	export default {
		components: {
			Product
		},
		name: 'classifsList',
		props: {
			//该模板需要的背景图列表
			choicenessList: {
				type: Array,
				default: () => []
			},
			//分类列表
			slist: {
				type: Array,
				default: () => []
			},
			//标题
			title: {
				type: String,
				default: '分类精选'
			}
		},
		data() {
			return {

			};
		},
		watch: {},
		methods: {
			//详情页
			navToDetailPage(item, typeID) {
				console.log(item);
				let id = '0',
					acytpe = '',
					goodsid = item.id || item.FItemID;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}&actype=${acytpe}&goodsid=${goodsid}`
				})
			},
			getFocusSearch(index) {
				
				uni.navigateTo({
					url: '../product/list?search=&id='+this.choicenessList[index].FGoodsClsID
				});
			},
		}
	}
</script>

<style lang="scss">
	/* 分类推荐楼层 */
	.hot-floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;

		.floor-img-box {
			width: 100%;
			height: 320upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255, 255, 255, .06) 30%, #f8f8f8);
			}
		}

		.floor-img {
			width: 100%;
			height: 100%;
		}

		.floor-list {
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
			position: relative;
			z-index: 1;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			.floor-image {
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;

			.more-text1 {
				margin-bottom: 4upx;
			}
		}
	}
</style>
